<template>
      <div class="rank">
        <div class="rank-header">
              <div class="header-left">
                  <img src="@/assets/img/head.jpg" alt="" class="my-headImg">
                  <van-tag type="primary" class="my-grade">中级</van-tag>
              </div>
              <div class="header-middle">
                 <div class="my-placing">我的名次</div>
                 <div class="my-ranking">1<span class="rank-word">top</span></div>
              </div>
              <router-link to="/grade" class="header-right">
                查看魅力值计算规则
                我的魅力值：910
              </router-link>
        </div>
        <div class="rank-waist">
           榜单更新倒计时：
           <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
        </div>
        <ul class="rank-list-wrapper">
            <li class="rank-list" v-for="( item, index ) in rankList" :key="index">
              <div class="rank-icon-wrapper" v-if="item.rank_num=='1'">
                <img src="@/assets/img/first.png" alt="" class="rank-icon">
              </div>
              <div class="rank-icon-wrapper" v-else-if="item.rank_num=='2'">
                <img src="@/assets/img/second.png" alt="" class="rank-icon">
              </div>
              <div class="rank-icon-wrapper" v-else-if="item.rank_num=='3'">
                <img src="@/assets/img/third.png" alt="" class="rank-icon">
              </div>
              <div class="rank-icon-wrapper" v-else>
                  {{item.rank_num}}
              </div>
              <div class="rank-headImg-wrapper">
                <img src="@/assets/img/head.jpg" alt="" class="rank-headImg">
              </div>
              <div class="rank-nickname">
                {{item.nickname}}
              </div>
              <div class="rank-grade-wrapper">
                <van-tag type="primary" class="rank-grade">{{item.rank_grade}}</van-tag>
              </div>
            </li>
        </ul>
      </div>
</template>

<script>
  import Vue from 'vue';
  import { CountDown } from 'vant';

  Vue.use(CountDown);
    export default {
        name: "Ranking",
        data() {
          return {
            time: 30 * 60 * 60 * 1000,
            rankList:[
              {
                rank_id:'001',
                rank_num:'1',
                headImgUrl:'1212',
                nickname:'任秋兰以为佩',
                rank_grade:'高'
              },
              {
                rank_id:'002',
                rank_num:'2',
                headImgUrl:'@/assets/img/head.jpg',
                nickname:'任秋兰以为',
                rank_grade:'高'
              },
              {
                rank_id:'003',
                rank_num:'3',
                headImgUrl:'@/assets/img/head.jpg',
                nickname:'任秋兰以',
                rank_grade:'高'
              },
              {
                rank_id:'004',
                rank_num:'4',
                headImgUrl:'@/assets/img/head.jpg',
                nickname:'任秋兰',
                rank_grade:'高'
              },{
                rank_id:'005',
                rank_num:'5',
                headImgUrl:'@/assets/img/head.jpg',
                nickname:'任秋',
                rank_grade:'高'
              },{
                rank_id:'006',
                rank_num:'6',
                headImgUrl:'@/assets/img/head.jpg',
                nickname:'任',
                rank_grade:'高'
              }
            ],
          };
        },
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .rank
    padding .2rem
    .rank-header
      height 2.3rem
      width calc(100% - .6rem)
      border-radius .1rem
      background $DefaultWalletColor
      between-align-items()
      padding 0 .3rem
      .header-left
        width 1.7rem
        height 1.7rem
        position relative
        center()
        .my-headImg
          width 1.7rem
          height 1.7rem
          border-radius .1rem
        .my-grade
          position absolute
          bottom 0
          height .3rem
          width .7rem
          center()
          background-color #A4A7CA
          border-radius .3rem
      .header-middle
        height 1.7rem
        between()
        flex-direction column
        width 2.5rem
        padding-left .3rem
        position relative
        .my-placing
          font-size .26rem
          color #fff
          position absolute
          top .3rem
        .my-ranking
          font-size .5rem
          color #fff
          position absolute
          top 1rem
          .rank-word
            font-size .3rem
      .header-right
        display flex
        height 1.7rem
        align-items flex-end
        color #fff
        font-size .2rem
    .rank-waist
      display flex
      justify-content flex-start
      height 1rem
      align-items center
      font-size .26rem
      color #999
    .rank-list-wrapper
      .rank-list
        display flex
        justify-content flex-start
        align-items center
        background-color #fff
        padding .2rem
        border-radius .1rem
        margin-bottom .2rem
        .rank-icon-wrapper
          width .7rem
          font-size .4rem
          left()
          color: $DefaultColor
          .rank-icon
            width .5rem
        .rank-headImg-wrapper
          width 1.6rem
          left()
          .rank-headImg
            border-radius .1rem
            width 1.3rem
            height 1.3rem
        .rank-nickname
          width 2.1rem
          font-size .3rem
          color #333
          padding-right .3rem
          overflow: hidden; /* 超出的部分隐藏起来 */
          white-space: nowrap;/* 不显示的地方用省略号...代替 */
          text-overflow: ellipsis;/* 支持 IE */
          -o-text-overflow: ellipsis;/* 支持 Opera */
      .rank-grade-wrapper
          .rank-grade
            background-color $DefaultColor
            border-radius .3rem
            width .7rem
            center()
</style>

<style scoped>
  .van-count-down{
    color: #999;
  }

</style>
